<p style="margin-bottom: 0px">&nbsp;</p>
<nz-spin [nzSpinning]="loading">
<nz-card>
  <nz-tabset>
    <nz-tab nzTitle="新增SP商"></nz-tab>
  </nz-tabset>
  <ng-template #extraTemplete></ng-template>

  <form nz-form   [nzLayout]="'vertical'" >
    <nz-card [nzBordered]="false" nzTitle="基础信息">
      <nz-row nzGutter="24">
        <nz-col nzMd="12" nzSm="24">
          <nz-form-item>
            <nz-form-label nzRequired nzFor="organizationName">机构名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="organizationName" placeholder="请输入机构名称">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="personCharge">负责人</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="personCharge" placeholder="请输入负责人姓名">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="mechanismTelephone">机构电话</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="mechanismTelephone" placeholder="请输入机构电话">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="personTelephone">负责人电话</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="personTelephone" placeholder="请输入负责人电话">
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col nzMd="12" nzSm="24">
          <nz-form-item>
            <nz-form-label nzRequired nzFor="organizationAddress">机构地址</nz-form-label>
            <nz-form-control>
              <textarea formControlName="organizationAddress" nz-input placeholder="请输入机构地址" style="height:121px;"></textarea>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="standbyContactOne">备用联系人1</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="standbyContactOne" placeholder="请输入备用联系人姓名">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="standbyContactTwo">备用联系人2</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="standbyContactTwo" placeholder="请输入备用联系人姓名">
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card [nzBordered]="false" nzTitle="合作详情">
      <nz-row nzGutter="24">
        <nz-col nzMd="12" nzSm="24">
          <nz-form-item>
            <nz-form-label nzRequired nzFor="grade">等级</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="grade" style="height: 32px;">
                <label nz-radio [nzValue]="1">一级合作商</label>
                <label nz-radio [nzValue]="2">二级合作商</label>
                <label nz-radio [nzValue]="3">三级合作商</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="marginContributionRatio">保证金缴纳比例</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="marginContributionRatio" [nzShowSearch]="true" [nzPlaceHolder]="'请选择保证金缴纳比例'">
                <nz-option [nzLabel]="'50倍杠杆'" [nzValue]="'50倍杠杆'"></nz-option>
                <nz-option [nzLabel]="'50倍杠杆'" [nzValue]="'50倍杠杆'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="agentProducts">代理产品</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="agentProducts" [nzShowSearch]="true" [nzPlaceHolder]="'请选择代理产品'">
                <nz-option [nzLabel]="'车抵贷'" [nzValue]="'车抵贷'"></nz-option>
                <nz-option [nzLabel]="'直租'" [nzValue]="'直租'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="commissionRatio">返佣比例</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="commissionRatio" [nzShowSearch]="true" [nzPlaceHolder]="'请选择返佣比例'">
                <nz-option [nzLabel]="'5%'" [nzValue]="'5%'"></nz-option>
                <nz-option [nzLabel]="'5%'" [nzValue]="'5%'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="moneyMakingBank">打款银行</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="standbyContactTwo" placeholder="请输入打款银行">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="paymentaccount">打款账号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="paymentaccount" placeholder="请输入打款账号">
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col nzMd="12" nzSm="24">
          <nz-form-item>
            <nz-form-label>备注</nz-form-label>
            <nz-form-control>
              <input nz-input placeholder="一级合作商:100%兜底，二级合作商:50%兜底，三级合作商:0%兜底" [disabled]="true">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="bond">保证金缴纳金额</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="bond" [nzShowSearch]="true" [nzPlaceHolder]="'请选择保证金缴纳金额'">
                <nz-option [nzLabel]="'10万元'" [nzValue]="'10万元'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="marginBalance">保证金余额</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="marginBalance" [nzShowSearch]="true" [nzPlaceHolder]="'保证金余额'">
                <nz-option [nzLabel]="'10万元'" [nzValue]="'10万元'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="superior">归属上级组织</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="superior" [nzShowSearch]="true" [nzPlaceHolder]="'请选择归属上级组织'">
                <nz-option [nzLabel]="'10万元'" [nzValue]="'10万元'"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="namePaymentAccount">打款账户名称</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="namePaymentAccount" placeholder="请输入打款账户名称">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzRequired nzFor="accountStatus">账号状态</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="accountStatus" style="height: 32px;">
                <label nz-radio [nzValue]="1">正常</label>
                <label nz-radio [nzValue]="2">关闭</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card [nzBordered]="false" nzTitle="附件资料">
      <nz-row nzGutter="24">
        <div class="upLoadImg">
          <div class="l"><p>上传营业执照</p></div>
          <div class="r">
            <div class="clearfix">
              <nz-upload
                nzAction="https://jsonplaceholder.typicode.com/posts/"
                nzListType="picture-card"
                [(nzFileList)]="fileList"
                [nzShowButton]="fileList.length < 3"
                [nzPreview]="handlePreview"
              >
                <i nz-icon type="plus"></i>
                <div class="ant-upload-text">上传图片</div>
              </nz-upload>
              <nz-modal
                [nzVisible]="previewVisible"
                [nzContent]="modalContent"
                [nzFooter]="null"
                (nzOnCancel)="previewVisible = false"
              >
                <ng-template #modalContent>
                  <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                </ng-template>
              </nz-modal>
            </div>
          </div>
        </div>
      </nz-row>
    </nz-card>
    <nz-row nzGutter="24" style="text-align: center;margin-bottom: 20px;">
      <button nz-button nzType="primary" type="submit">提交</button>
      <button nz-button class="ml-sm">重置</button>
    </nz-row>
  </form>

</nz-card>
</nz-spin>
